<!-- 待提货的list组件 是否部分提货是前端做的筛选-->
<template>
    <view class="item_contain">
        <view class="card" @click="toInfoPage">
            <view class="top">
                <view>承运单号:{{ item.billNo || '暂无数据' }}
                    <Order size="10" @click="copy(item.billNo)" />
                </view>
                <view class="status">{{ item?.upNumberQuantity > 0 && item?.upNumberQuantity < item?.quantity ? '部分提货' : '待提货'}}</view>
                </view>
                <view class="center">
                    <view>
                        <view class="content">{{ item.startBranchName || '暂无数据' }}</view>
                        <view class="tit">起运地</view>
                    </view>
                    <view>
                        <image class="car" src="@/assets/images/homePage/shouye_img_qianwang@3x.png" />
                    </view>
                    <view>
                        <view class="content">{{ item.destinationBranchName || '暂无数据' }}</view>
                        <view class="tit">目的地</view>
                    </view>
                </view>
                <view class="list">
                    <view class="it">
                        <view>货物信息：{{ item?.goodsInfo[0].goodsName || '暂无数据' }}，</view>
                        <view
                            :style="{ color: item?.goodsInfo[0].upNumber && item?.goodsInfo[0].upNumber !== item?.goodsInfo[0].goodsNumber ? '#0966FF' : '#666' }">
                            {{ filterGoodsNum(item?.goodsInfo[0]) }}</view>
                        <view>{{ filterGoodsInfo(item.goodsInfo[0]) }}</view>
                    </view>
                    <view class="it">上次提货时间：{{ filterTime(item.lastUpTime) }}</view>
                </view>
                <view class="bottom">
                    <view
                        :style="{ visibility: item.pickUpMode == '1' && !item.allPaid && item.clearingForm != 3 ? 'visible' : 'hidden' }"
                        class="need_pay">待付款：￥{{ allPay }}
                    </view>
                    <view class="btn_box">
                        <!-- 1020 -->
                        <!-- <nut-button class="btn btn1" @click.stop="toCode">运单二维码</nut-button> -->
                        <nut-button class="btn btn2" @click.stop="toSignPage(item)">我要交货</nut-button>
                    </view>
                </view>
            </view>
        </view>
</template>
    
<script setup lang='ts'>
import { OrderListType } from '@/type/index'
import useOrderStore from '@/store/order';
import picker from '@/store/pick'
import Taro from '@tarojs/taro';
import dayjs from 'dayjs'
import { Order } from '@nutui/icons-vue-taro';
import { onMounted, ref, nextTick, reactive } from "vue";


const props = defineProps<{
    item
}>()

const item = props.item
const orderStore = useOrderStore()
const pickStore = picker()



const allPay = ref(0);//待付款

// 计算待付款 
item.costList.forEach((item) => {
    allPay.value = allPay.value + (item.actualMoney - item.paidMoney)
});


// 运单二维码
function toCode() {
     Taro.showToast({
    title: `暂未开放`,
    icon: 'error',
    duration: 2000
  })
    console.log('跳转去运单二维码')
}


// 跳转到交货签收页
function toSignPage(item: OrderListType) {
    orderStore.orderInfo = item
    pickStore.restPickerInfo();
    Taro.navigateTo({
        url: '/pages2/signPage/index'
    })
}

// 跳转去对应的详情页 直接跳 本来查的就是提货数据
function toInfoPage() {
    orderStore.orderInfo = item
    Taro.navigateTo({
        url: '/pages2/waybillPage/signInfo'
    })
}

// 复制订单标号
const copy = (msg) => {
    Taro.setClipboardData({
        data: msg,
        success: function (res) {
            Taro.getClipboardData({
                success: function (res) {
                    console.log(res.data) // data
                    Taro.showToast({
                        title: `复制成功`,
                        icon: 'success',
                        duration: 2000,
                    })
                }
            })
        }
    })
}


// 过滤时间
function filterTime(val) {
    if (val) {
        return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
    } else {
        return '暂无数据'
    }
}

// 过滤货物件数
// function filterGoodsNum(val) {
//     const { upNumber, goodsNumber } = val;
//     let goodsNum;
//     if (goodsNumber) {
//         if (upNumber !== goodsNumber) {
//             goodsNum = upNumber !== 0 ? '(' + upNumber + '/' + goodsNumber + ')' : goodsNumber
//         } else {
//             goodsNum = goodsNumber
//         }
//     }
//     return (
//         `${goodsNum}件,`
//     );
// }

// 过滤货物件数
function filterGoodsNum(val) {
  if (val) {
    const { upNumber, goodsNumber } = val
    let goodsNum
    if (goodsNumber) {
      if (Number(upNumber) !== Number(goodsNumber)) {
        goodsNum = Number(upNumber) !== 0 ? '(' + Number(upNumber) + '/' + Number(goodsNumber) + ')' : Number(goodsNumber)
      } else {
        goodsNum = Number(goodsNumber)
      }
    }
    return `${goodsNum}件`
  }
}

// 过滤货物重量体积包装
function filterGoodsInfo(val) {
    const { weigh, goodsVolume, packing } = val;
    return (
        `${weigh || ''}kg，${goodsVolume.toFixed(2) || ''}m³，${packing || ''}`
    );
}

</script>

<style lang="scss">
.item_contain {
    padding-top: 0 !important;
}

.card {
    margin: 16rpx auto;
    background: #fff;
    border-radius: 10rpx;
    padding: 24rpx;
    box-sizing: border-box;

    .top {
        width: 654rpx;
        font-size: 22rpx;
        color: #252525;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .status {
            display: inline-block;
            height: 40rpx;
            line-heifht: 40rpx;
            text-align: center;
            background: #ffeddb;
            color: #FF8F1F;
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: 10rpx;
        }
    }

    .center {
        width: 580rpx;
        margin: 36rpx auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        .content {
            font-size: 28rpx;
            color: #252525;
            font-weight: bold;
        }

        .tit {
            font-size: 24rpx;
            color: #999;
        }

        .car {
            width: 224rpx;
            height: 56rpx;
        }
    }

    .list {
        width: 654rpx;
        margin: 36rpx auto;
        background: #f5f5f5;
        color: #666;
        font-size: 24rpx;
        padding: 12rpx;
        box-sizing: border-box;
        border-radius: 10rpx;

        .it {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 10rpx;
        }
    }

    .bottom {
        width: 654rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        .need_pay {
            color: #FF8F1F;
            font-size: 24rpx;
        }

        .btn_box {
            display: flex;
            justify-content: center;
            align-items: center;

            .btn {
                display: inline-block;
                height: 56rpx;
                line-height: 56rpx;
                border-radius: 88rpx;
                padding: 12px 24px;
                text-align: center;
                font-size: 24rpx;
                box-sizing: border-box;
            }

            .btn1 {
                border: 1rpx solid #C4C4C4;
                color: #252525;
                margin-right: 16rpx;
            }

            .btn2 {
                border: 1rpx solid #0966FF;
                color: #0966FF;
            }
        }

    }
}
</style>